import React, {Component} from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {StyleSheet, Text, View} from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';

function HomeScreen() {
  return (
    <View style={[styles.container]}>
      <Text style={[styles.text]}>Home Screen</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={[styles.container]}>
      <Text style={[styles.text]}>News Screen</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default class index extends Component {
  render() {
    return (
      <Tab.Navigator
        screenOptions={(route: any) => ({
          tabBarIcon: (tabBar: any) => {
            let iconsName: any;
            if (route.route.name === 'Home') {
              iconsName = tabBar.focused ? 'add-circle-outline' : 'add-circle';
            } else if (route.route.name === 'Settings') {
              iconsName = tabBar.focused ? 'settings-outline' : 'settings';
            }
            return <Ionicons name={iconsName} size={25} color={tabBar.color} />;
          },
          tabBarActiveTintColor: 'tomato',
          inactiveTintColor: 'gray',
        })}>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 40,
  },
});
